<template>
  <div id="app">
    <el-container>
      <el-header>
        <div class="header-main">
          <img class="logo" src="./assets/1xlogo.png">
          <ul class="header-nav">
            <li  v-for="(item,value) in navList">
              {{item.n}}
            </li>
          </ul>

          <a class="header-btn " style="float:right">Login</a>
          <a class="header-btn " style="float:right">Sign Up</a>
          <div class="header-search">
            <input class="font" type="text" placeholder="搜索...">
            <img src="./assets/searchicon.png">
          </div>
        </div>
      </el-header>
      <!--vue的路由-->
      <router-view/>
      <sideNav></sideNav>
    </el-container>
  </div>
</template>

<script>
  import sideNav from './components/sideNav'

export default {
  name: 'App',
  data(){
    return {
      navList:[
        {n:'首页',nav:''},
        {n:'首页',nav:''},
        {n:'首页',nav:''},
        {n:'首页',nav:''},
        {n:'首页',nav:''}
      ]
    }
  },
  components: {
    sideNav,
  },
}
</script>

<style  lang="less">
  .clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
  *{padding:0;margin:0;list-style: none;cursor: default;border:none;color:rgba(255,255,255,0.8);}
  ul,li{list-style: none;}
  input:focus {
    outline: none;
  }
  img{
    width:100%;
    height:100%;
  }
#app {
  background: #101010;
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:auto;
  .el-header{
    height:66px !important;
    background:#000;
    .header-main{
      width:95vw;
      height:100%;
      margin:0 auto;
      .logo{
        float:left;
        width:33px;
        height:33px;
        line-height:66px;
        vertical-align: middle;
        display: inline-block;
      }
      .header-nav{
        float:left;
        line-height:66px;

        li{
          cursor: pointer;

          float:left;
          padding:0 0.3vw;
          margin:0 0.3vw;
          text-align: center;
          position: relative;
          &:after{
            content:"";
            position: absolute;
            top:70%;
            left:0;
            width:0;
            height:1px;
            background: #fff;
            transform: translateY(-50%);
            transition: all 0.2s;
          }
          &:hover::after{
            width:100%;
          }
        }

      }
      .header-search{
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        float:right;
        width:145px;
        height:20px;
        padding:0.42vw 0.6vw;
        background:linear-gradient(#000,#141414);
        margin-right:2vw;
        input{
          height:100%;
          width:80%;
          float:left;
          background: transparent;
          line-height:1.6vw;
        }
        img{
          cursor:pointer;
          float:right;
          width:0.9vw;
          height:0.9vw;
          line-height:1.6vw;
          vertical-align: middle;
        }
      }
      .header-btn{
        cursor: pointer;
        padding:0 0.3vw;
        margin:0 0.3vw;
        line-height:66px;
      }
    }
  }

}

</style>
